<template>
  <el-dialog v-model="dialogVisible" :title="'查看数据源'" width="1000px">
    <VulnTable
      :tableData="tableData"
      :loading="loading"
      :showSelection="false"
    >
      <!-- <template #optSlot>
        <el-table-column label="操作" width="120">
          <template #default="{ row }">
            <el-button
              type="primary"
              link
              icon="View"
              @click="handleViewDetails(row)"
              >查看详情</el-button
            >
          </template>
        </el-table-column>
      </template> -->
    </VulnTable>

    <div v-if="total > 0" class="pagination-container">
      <el-pagination
        background
        v-model:current-page="page"
        v-model:page-size="limit"
        :page-sizes="limit"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handlePagination"
        @current-change="handlePagination"
      />
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { getNewVuln } from "@/api/intelligence";

const props = defineProps({
  /**
   * 是否显示弹窗
   */
  visible: {
    type: Boolean,
    default: false,
  },
  vulnId: {
    type: String,
    default: null,
  },
});

/**
 * 定义组件事件
 */
const emit = defineEmits(["update:visible"]);

// 弹窗可见状态，用于内部控制
const dialogVisible = computed({
  get: () => props.visible,
  set: (val) => emit("update:visible", val),
});

const page = ref(1);
const limit = ref(10);
const total = ref(0);
const loading = ref(false);
const tableData = ref([]);
const level_list = ref({
  低: "warning",
  中: "warning",
  高: "danger",
  严重: "danger",
});

// 获取标签类型
const getTagType = (level) => {
  return level_list.value[level] || "";
};

const lookVuln = () => {
  getNewVuln({
    page_index: page.value,
    page_size: limit.value,
    id: props.vulnId,
  }).then((res) => {
    console.log(res);
    tableData.value = res.data || [];

    total.value = res.total_items;
  });
};

// 处理分页
const handlePagination = () => {
  lookVuln();
};

watch(
  () => props.visible,
  (newValue, oldValue) => {
    if (newValue) lookVuln();
  }
);
</script>

<style lang="scss" scoped></style>
